<template>
  <view class="makepicker">
    <view class="pickertitle">{{ props.title }}</view>
    <image
      @click="close"
      class="close"
      src="/static/earnings/close.png"
      mode="scaleToFill"
    />
    <picker-view
      :value="value"
      @change="change"
      mask-style="background: none"
    >
    <!-- 通过mask-style设置background的背景色为none来取消蒙版 -->
      <picker-view-column v-for="(item,index) in props.list" :key="index">
        <!-- 给picker-view-column添加底色试其与外层盒子颜色一样 来控制picker的整体背景色 -->
        <!-- 选中项样式通过picker-view-column内部的view中的样式进行修改 进行动态添加 -->
        <!-- 注：使用内置组件无法去除选择框（内置自带无隐藏或取消方式 解决方案：1.给予类似的背景色 2.通过透明度进行微调） -->
        <view class="month" v-for="(info,i) in item" :key="i" :class="{active:i == value}">{{ info.name }}</view>
      </picker-view-column>
    </picker-view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },  title: {
    type: String,
    default: ''
  }
})
const emits = defineEmits(['close','change'])

const value = ref(0)
const change = (e) => {
console.log(e.detail.value);
value.value = e.detail.value
emits('change', [e.detail.value,props.title])
value.value = e.detail.value
}

const close = () => {
  value.value = 0
  emits('close')
}
</script>

<style lang="scss" scoped>
.makepicker {
border-radius: 30rpx 30rpx 0rpx 0rpx;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 750rpx;
height: 440rpx;
background: #112959;
.pickertitle {
  font-family: FZLanTingHeiS-R-GB;
  font-weight: 400;
  font-size: 34rpx;
  color: #00C1FF;
  line-height: 40rpx;
  margin-top: 50rpx;
  margin-bottom: 72rpx;
}
}
picker-view {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
picker-view-column {
width: 100vw;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #112959;
}
.month {
display: flex;
justify-content: center;
align-items: center;
color: #3A75C0;
}
.active {
color: #00C1FF;
background: #011F44;
}
.close {
position: absolute;
right: 24rpx;
top: 42rpx;
width: 30rpx;
height: 30rpx;
}

</style>
